<template>
  <div class="container">
    <div class="top">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <div class="left">
              <el-select v-model="evaluationType" placeholder="评教类型" size="large" clearable @change="getQuest">
                <el-option v-for="item in evaluationTypes" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>

              <el-select v-model="delta" placeholder="delta值" size="large">
                <el-option v-for="d in deltas" :key="d" :label="d" :value="d" />
              </el-select>
            </div>
            <div class="right">
              <el-select v-model="processType" placeholder="处理类型" size="large" clearable>
                <el-option v-for="item in processTypes" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
              <el-button type="primary" round @click="handle">确定</el-button>
            </div>
          </div>
        </template>
        <el-table v-show="evaluationType" ref="multipleTable" :data="questList" height="250" border @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="40" center />
          <el-table-column prop="index" label="序号" width="60" align="center" />
          <el-table-column prop="questEvaluate" label="名称" align="center" />
          <el-table-column prop="tag" label="Tag" width="100" align="center">
            <template #default="scope">
              <el-tag :type="scope.row.tag === '未处理' ? 'info' : 'success'" disable-transitions>{{ scope.row.tag
              }}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <el-card v-show="visible" class="main">
      <div slot="header" class="clearfix">
        <span>学生评教</span>
      </div>
      <el-table :data="weightData" style="width: 100%" border>
        <el-table-column prop="itemName" label="名称" align="center" />
        <el-table-column prop="e" label="熵" align="center" />
        <el-table-column prop="d" label="信息效用值" align="center" />
        <el-table-column prop="w" label="权重" align="center" />
      </el-table>
      <div class="text">
        <h3>说明<i class="el-icon-info" style="margin-left: 10px;" /></h3>
        熵是对不确定性信息的一种度量。信息量越大，不确定性就越小，熵也就越小；信息量越小，不确定性越大，熵也越大。熵值越接近 1，说明该指标的数据分布越均匀。
      </div>
    </el-card>
  </div>
</template>

<script>
import { entropyWeight, getQuestList } from '@/api/evaluation'
import { Message } from 'element-ui'
export default {
  name: 'Weight',
  data() {
    return {
      weightData: [],
      questList: [],
      selectionList: [],
      evaluationType: null,
      evaluationTypes: [{
        label: '学生评教',
        value: '1'
      }, {
        label: '督导评教',
        value: '2'
      }],
      delta: null,
      deltas: [0, 0.03, 0.05, 0.1, 0.15],
      processType: null,
      processTypes: [
        {
          label: '正向化',
          value: '1'
        }, {
          label: '负向化',
          value: '2'
        }, {
          label: '适度化',
          value: '3'
        }],
      itemProcess: [], // 各项处理的方式
      visible: false
    }
  },
  methods: {
    getQuest(val) {
      this.questList = []
      if (val === '') {
        return
      }
      getQuestList(val).then(res => {
        const data = res.data
        this.questList = data
        let idx = 0
        this.questList.forEach(element => {
          element.index = idx
          idx++
          element.tag = '未处理'
        })
        // 初始化
        this.itemProcess = new Array(data.length).fill('0')
      })
    },
    calcWeight(type, processTypes, delta) {
      entropyWeight(type, processTypes, delta).then(res => {
        const data = res.data
        console.log('权重：', data)
        this.weightData = data
        this.visible = true
      })
    },
    handleSelectionChange(val) {
      console.log(val)
      this.selectionList = []
      val.forEach(element => {
        this.selectionList.push(element.index)
      })
    },
    handle() {
      if (this.processType === null) {
        Message({
          message: '请选择分析项的处理方式',
          type: 'warning',
          duration: 2000
        })
        return
      }
      if (this.delta === null) {
        Message({
          message: '请选择参数',
          type: 'warning',
          duration: 2000
        })
        return
      }
      this.selectionList.forEach(element => {
        this.itemProcess[element] = this.processType
        this.questList[element].tag = '已处理'
      })
      // 清楚勾选
      this.$refs.multipleTable.clearSelection()
      if (this.itemProcess.includes('0')) {
        Message({
          message: '请选择剩余分析项的处理方式',
          type: 'warning',
          duration: 2000
        })
        return
      }
      console.log('types: ', this.itemProcess)
      this.calcWeight(this.evaluationType, this.itemProcess, this.delta)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 30px;

  .top {
    .box-card {
      .card-header {
        display: flex;
        justify-content: space-between;
        .left {
          .el-select {
            margin-right: 30px;
          }
        }
        .right {
          .el-select {
            margin-right: 30px;
          }
        }
      }
    }
  }

  .main {
    margin-top: 30px;
    .text {
      margin: 30px 0 30px;
      background-color: #F3F9FE;
      padding: 10px;
    }
  }
}
</style>
